import { memo } from 'react';
import { Handle, Position } from '@xyflow/react';
import { 
  FileText, Video, Image, Presentation, HelpCircle, List, Cloud, 
  MessageSquare, BarChart3, Users, BookOpen, ExternalLink, Palette,
  PlayCircle, FileImage, FileVideo
} from 'lucide-react';

const iconMap = {
  'fileText': FileText,
  'video': Video,
  'image': Image,
  'presentation': Presentation,
  'helpCircle': HelpCircle,
  'list': List,
  'cloud': Cloud,
  'messageSquare': MessageSquare,
  'barChart3': BarChart3,
  'users': Users,
  'bookOpen': BookOpen,
  'externalLink': ExternalLink,
  'palette': Palette,
  'playCircle': PlayCircle,
  'fileImage': FileImage,
  'fileVideo': FileVideo,
};

interface ModernCompactNodeProps {
  data: {
    label: string;
    subtitle: string;
    icon: string;
    category: string;
  };
  selected: boolean;
}

export const ModernCompactNode = memo(({ data, selected }: ModernCompactNodeProps) => {
  const Icon = iconMap[data.icon as keyof typeof iconMap] || FileText;
  
  const getCategoryColor = (category: string) => {
    switch (category) {
      case 'types':
        return '#6A5CFF';
      case 'interactive':
        return '#6A5CFF';
      case 'content':
        return '#4C80FF';
      case 'integrations':
        return '#8B5CF6';
      default:
        return '#6A5CFF';
    }
  };

  const categoryColor = getCategoryColor(data.category);

  return (
    <div className="modern-compact-node" style={{ 
      borderColor: selected ? categoryColor : '#E0E0E0',
      background: selected ? '#F8F7FF' : '#FFFFFF'
    }}>
      {/* Four connection handles */}
      <Handle
        type="target"
        position={Position.Top}
        id="top"
        className="modern-handle"
      />
      <Handle
        type="source"
        position={Position.Bottom}
        id="bottom"
        className="modern-handle"
      />
      <Handle
        type="target"
        position={Position.Left}
        id="left"
        className="modern-handle"
      />
      <Handle
        type="source"
        position={Position.Right}
        id="right"
        className="modern-handle"
      />

      {/* Node content */}
      <div className="flex flex-col items-center gap-1 p-2">
        <div 
          className="p-1.5 rounded-md flex items-center justify-center"
          style={{ backgroundColor: `${categoryColor}15` }}
        >
          <Icon 
            className="w-4 h-4" 
            style={{ color: categoryColor }}
          />
        </div>
        <div className="text-xs font-semibold text-gray-900 text-center leading-tight">
          {data.label}
        </div>
        <div className="text-xs text-gray-500 text-center leading-tight">
          {data.subtitle}
        </div>
      </div>
    </div>
  );
});

ModernCompactNode.displayName = 'ModernCompactNode';